<template>
  <van-nav-bar title="我的" left-text="订单" @click-left="dingdan"/>
  <div class="box">
    <van-skeleton avatar :loading="!ispd"/>

    <div class="toubu">
      <van-image
      v-if="ispd"
        round
        width="10rem"
        height="10rem"
        :src="store.myData.userimg"
      />
      <div class="tel" v-if="ispd">
        <van-skeleton title :row="1" :loading="!ispd"/>

        <div class="username" style="color: red">
          {{ store.myData.username }}
        </div>
        <div class="userphone">{{ store.myData.userphone }}</div>
      </div>
    </div>

    <van-skeleton title :row="4" :loading="!ispd"/>
    <div class="menu" v-if="ispd">
      <div class="menuitem">
        <van-cell title="我的订单" is-link :to="'/myorder'"/>
      </div>
      <div class="menuitem">
        <van-cell title="待支付" is-link />
      </div>
      <div class="menuitem">
        <van-cell title="我的地址" is-link />
      </div>
      <div class="menuitem">
        <van-cell title="意见反馈" is-link />
      </div>
      <div class="menuitem">
        <van-cell title="售后详情" is-link />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/store/my";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore();
console.log(store.myData);

import {ref} from 'vue'
let ispd=ref(false)
setTimeout(()=>{
  ispd.value=true
},2000)


//订单页面
import { useRouter } from "vue-router";
let router=new useRouter()
const dingdan=()=>[
  router.push('/myorder')
]
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  margin: 5px;
  .toubu {
    display: flex;
    .tel {
      display: flex;
      flex-direction: column;
      line-height: 40px;
      margin-left: 30px;
    }
  }
  .menu {
    margin-top: 20px;
    .menuitem {
      .van-cell {
        background: #eee;
        width: 90%;
        margin: 0px 20px ;
      }
    }
  }
}
</style>
